			<#include "./header.html">	
		    <#include "./nave.html">	
			<div class="c_body shadow" >
			
			<style>
				.ds_view .panel{
					float: left;
				    border: 1px solid #999;
				    border-radius: 5px;
				    width: 660px;
				    height: 100%;
				 
				    background: rgba(0,0,0,0.2);
				    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
							
				}
			   .panel .title{
			         height: 40px;
				    line-height: 40px;
				    /* text-align: center; */
				    /* box-shadow: 1px 1px 2px rgba(0,0,0,0.8); */
				    /* border-bottom: 1px solid #888; */
				  
			    }
			    
			  
			 
			   .panel .items .item{
			            color: white;
					    line-height: 40px;
				 
	  
					    cursor: pointer;
				 
					    height: 40px;
					    
					    
			    }  
			    .panel .items .item:nth-child(2n+1){
			    	   /*   background:  linear-gradient(to top, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4)50%, rgba(255, 255, 255, 0.2)100% );   */
			    	          background:    rgba(255, 255, 255, 0.2) ;   
			    }
			    
			    .panel  span{
			      
					     /* margin: 5px; */
					    /* float: left; */
					  
			     }
			      .panel .title span{
			      	    text-align: center;
			      	    
			      	    line-height: 35px;
					    height: 35px;
					    display: inline-block;
					    float: left;
				
					    border-right: 1px solid #aaa;
                        border-left: 1px solid #222;
                        color:white;    
			      	    
			      }
			      .level_1 span{
			         border:none;
			      }
			   
			    .panel  .nav_items  .level_2.active::before{	  
				 /*  background: #63FF13;  	*/ 
			    }
			    .panel  input{
			       height: 38px;
				    border: none;
				    border-radius: 1;
				    margin: 0;
				    padding: 0;
				    float: left;
				  
				    border-right: 1px solid #aaa;
				    border-left: 1px solid #222;
				    background: rgba(255,255,255,0.2);
				    color:white;	    
			    }
			    .panel .items .item.active  {
			        background:rgba(0,0,0,0.6);	
			    }
			    .panel .items .item.editable  {
			        background:rgba(8, 255, 130, 0.35);	
			    }
			    
			    
			    .panel     .name{
			        width: 300px;
			        border:none;
			    }
			    
			    .panel     .onoff,.panel     .isforce {
			      width:35px;
			    }
			    .panel   .period  {
			      width:60px;
			    }
			    .panel   .glocation  {
			      width:120px;
			    }
			    .panel .gtlocation{
			      width:120px;
			    }
			    
			    .panel .gprovince{
				    width:68px;
				    background-color: rgba(0,0,0,0.1);
				    text-align: center;
			    }
			    
			 
			    #mapview{
			    height:100%;
			    background:blue;
			    float:right;
			    }
			    #equipmentList{
			    float:left;}
			    #panel_save1{
				 
				    
			    }
			   /*  重写之前的样式 适应当前页面 */
			   #equipmentList .nav_items  .level_2{
			    cursor: pointer;
			     padding: 0px;  
			     margin: 0px;  
			   /* -webkit-box-shadow: inset 1px 0px 1px #FFF;*/
			  }
			    
			    
			    .panel .title i{
			          
			     
			         cursor:pointer;
			         border-radius:5px;
			    }
			    .panel  .items i{
			        float: right;
				    margin-top: 10px;
				    margin-right: 5px;
				    width: 20px;
				    height: 30px;
			    }
			    .panel .items  i:hover{
			      color:#0f0;
			    }
			    .panel .title  a{
				       float: right;
				    width: 30px;
				    height: 30px;
				 
				    margin: 3px;
				 
				    margin: 5px 10px 0px 0px;
				    box-shadow: inset 0px -2px 2px #1F1E1E,inset 0px -3px 1px #5DFB52;
				    cursor: pointer;
				 
				    line-height: 20px;
				    font-size: 24px;
				    text-align: center;
				    line-height: 30px;
			    }
			    .panel .title i:hover{
			         color:yellow;
			    }
			    #search_input{
			        background: black;
				    position: absolute;
				    left: 2px;
				    z-index: 1;
				    display:none;
				   
				    top: 33px;
			    }
			</style>
					<div class="page_view">
					    <div class="ds_tool   gradient">
					        <span class="title">
					        
					        </span> 
						</div>
					 
					  <div class="ds_view">
						    <div class="panel"   id="equipmentList" >
						    <div class="title gradient" id="title">
						    <span class="name">设备名称<input type='text' id="search_input"><a  href="#"   id="eqp_search" ><i class="fa fa-search  "   ></i></a></span>
						    <span class="check">主动</span>
						    <span class="period">周期(m)</span>
						    <span class="check">强制</span>
						    <span class="gtlocation">地理位置</span> 
						    <span class="gprovince">地区</span> 
						    <a id="panel_save" href="#"><i class="fa fa-save  "  ></i></a>
						    </div>
						    <div class="content scroll"  >
						    	  <ul class='nav_items' tar="${s.base}/equip/geteqps">
		               	                 <div>正在加载设备列表.. ..</div>
		                              
		              	          </ul>	
						    </div>
						 </div>
						 
						    <div id="mapview">
					          
					        </div>
					  </div>
					
					  
					     
					     
					</div>
			</div>
		</div>
 
						 
		 <#include "../pc/flooder.html">				 
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WqYQM9vVnQ2VQf2KcjWGR2BP"></script>
		<script type="text/javascript" src="${s.base}/res/pc/js/BDComplexMarket.js"></script> 			         
	    <script>
	    $(function($){
	    /* 	   window.onresize = function(){
	    		 
	    			  
	    		   adjustwindow();
	    		   } */
	    	   adjustwindow();
	    	  function  adjustwindow(){
	    			 $(".panel .content").height($(".panel").height()-$(".panel .title").height()-5);
	    	   }
	    
	    	
	    	$("#mapview").width($(".ds_view").width()-$(".panel").width()-5);
	    	
	    	$("body").off("click", ".level_2>.name");
            
        	$("body").on(
        			"click",
        			".level_2>.name",
        			function() {
        				var _this = $(this).parent();
        				_this.siblings().removeClass("active");
        			    _this.toggleClass("active"); 
        			    
        		 return false;
        	}); 
	      //  $("#equipmentList .content").load(CONETXT_PATH+"/admin/equipments");
	        
	        var tar=$("#equipmentList .nav_items");
        	tar.load(tar.attr("tar"));
    		var map=	initMap("mapview");
    		var myGeo = new BMap.Geocoder();
    		map.bindEvent();
        	// // 树形结构菜单点击

        	$("body").on("click", ".level_1 .span", function() {
        		var _this = $(this).parent();
        		if (_this.hasClass("active")) {
        			_this.removeClass("active");
        			return;
        		}
        		$(".level_1.active").removeClass("active");

        		_this.addClass("active");
        		
        		if (_this.find(".item_content").html() == "") {
        		 	var _depid=_this.attr("tar").match(/[1-9][0-9]*/g); 
        			_this.find(".item_content").load(CONETXT_PATH+"/admin/eqpdetail/"+_depid,function(){
        				displayLocation()
        			});
        		}
        		else 
        			displayLocation()
        		//去掉地图上 已经存在的 marker，添加当前选择的marker  
        		function displayLocation(){
        			map.clearOverlays();
        		   var items=_this.find(".level_2");
        		   var paned=false;
        		   items.each(function(index){ 
        			   var tar=$(this);
        			   var name=tar.children(".name").html();
        			//   console.log(tar.children(".check")[0].checked);
        			 //  console.log(tar.children(".period").val());
        			   var  gtar=tar.children(".glocation");
        			   var  points=gtar.val().split(",");
        			   if(points.length>1){
                             if(paned==false){
                            	 map.panTo(new BMap.Point(points[0],points[1]));
                            		$(".ds_tool .title").html(name);
                                 paned=true;
                             }
	        			   var marker=   addMarker(map,new BMap.Point(points[0],points[1]),name,tar.attr("puid"));
	        			   tar.data("marker",marker);
        			   }
        		   });
        			
        		}
        	});
        	
        	//显示   搜索   输入框
        	$("#eqp_search").on("click",function(){
        		  var _this=$(this);
        		  if($("#search_input").css("display")=="none")
        		     $("#search_input").show();
        		  else{
        			  $("#search_input").hide();  
        			  $(".level_2").show();
        		  }
        	});
        	
        	$("#search_input").on("keydown",function(event){
        		 var keycode = (event.keyCode ? event.keyCode : event.which); 
        		/*  switch(event.keyCode) {
        		    // ...
        		    // 不同的按键可以做不同的事情
        		    // 不同的浏览器的keycode不同
        		    // 更多详细信息:     http://unixpapa.com/js/key.html
        		    // ...
        		    if()
        		  } */
        		  console.log(keycode);
        		 if(keycode==13){
        			 var _text=$("#search_input").val();
        			  console.log(_text);
        			  $(".level_2").hide();
        			 /*  console.log(".level_2 .name:contains('"+_text+"')");
        			  alert( $(".level_2 .name:contains('"+_text+"')").length) */
        			  $(".level_2 .name:contains('"+_text+"')").parent().show();
        		 }
 
        	});
        	
            //联动地图
        	$("body").on("keydown",".glocation",function(event){
        		 var keycode = (event.keyCode ? event.keyCode : event.which); 
        	 
        		  console.log(keycode);
        		  var _this=$(this);
        		 if(keycode==13){
        			 var _text=_this.val();
        			  console.log(_text);
        			  var  points=_this.val().split(",");
   				   if(points.length<2) {
   					   var msg={success:false,desc:"该设备坐标参数不全！"}
   					 //  showTipInfo(msg);
   				   }
   				   else{
   					   var pt=new BMap.Point(points[0],points[1]);
   					map.panTo(pt);  
   					addMarker(map,pt,_this.siblings(".name").children("span").html());
   					myGeo.getLocation(pt,function(rs){
   						var addComp = rs.addressComponents;
   						 
   						_this.siblings(".gprovince").val(addComp.city.split('市')[0]);
   						
   					})  
   				   }
   				   
        		 }
 
        	});
            
        	$("body").on("keydown",".gprovince",function(event){
       		 var keycode = (event.keyCode ? event.keyCode : event.which); 
       	 
       		  console.log(keycode);
       		  var _this=$(this);
       		 if(keycode==13){
       			 var _text=_this.val();
       			map.centerAndZoom(_text,15);  
       		 }

       	});
        	
 
	        //初始化模板选择的下拉框
			//var sel = document.getElementById('stylelist');
			//for(var key in mapstyles){
			//	var style = mapstyles[key];
			//	var item = new  Option(style.title,key);
			//	sel.options.add(item);
			//}

			
			
			
			///保存 配置的信息
			$("#panel_save").on("click",function(){
 
				   var items=$(".level_2");
				   var  list=[];
				   items.each(function(){
					  var item=$(this);
					  
					  var name=item.children(".name").html();
					  var _onoff=Number(item.children("input[name='onoff']")[0].checked);
					  var _isforce=Number(item.children("input[name='isforce']")[0].checked);
					  var _period=item.children(".period").val();
					  var _glocation=item.children(".glocation").val();
					  var _prname=item.children(".gprovince").val();
					  
				  
					  list.push({puid:item.attr("puid"),depid:'',onoff:_onoff,isforce:_isforce,period:_period,glocation:_glocation,prname:_prname});
					   
				   });
				   //提交保存
				   $.ajax({ 
			            type:"POST", 
			            url:CONETXT_PATH+"/admin/updateDetail", 
			            dataType:"json",      
			            contentType:"application/json",               
			            data: JSON.stringify(list), 
			            success:function(data){ 
			            	//显示保存结果
			            	showTipInfo(data);
			                      
			            } 
			         }); 
			    
				 //  $.post(CONETXT_PATH+"/admin/updateDetail", JSON.stringify(list) );
				   
			});
			
	    })
    
      
	   </script>
	
</body>
